<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">
        {{title}}
      </el-col>
      <el-col :span="17" class="myTextAlignRight">
        <!-- <el-button type="primary" class="myBgGreen" @click="toTaskRules">整改任务创建规则</el-button> -->
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="4">
        <template>
          <el-cascader
            placeholder="全部项目/小区"
            :options="regionOptions"
            v-model="regionOptSelected">
          </el-cascader>
        </template>
      </el-col> 
      <el-col :span="3">
        <template>
          <el-select v-model="majorSelected"
            clearable
            placeholder="全部考核类型">
            <el-option
              v-for="item in major"
              :key="item.type_name"
              :label="item.type_name"
              :value="item.type_id">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="timeSelected"
            clearable
            placeholder="时间类型">
            <el-option
              v-for="item in time"
              :key="item.label"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="timevalue"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col> 
      <el-col :span="3">
        <el-input placeholder="请输入关键词" v-model="kw"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="search">查询</el-button>
      </el-col>
    </el-row>
    
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <template>
          <el-table
            border
            :data="list"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  border
                  stripe
                  :data="props.row.rectify_list"
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="序号"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    label="整改任务单号"
                    prop="rectify_no" >
                  </el-table-column>
                  <el-table-column
                    label="任务生成时间"
                    prop="gen_time" >
                  </el-table-column>
                  <el-table-column
                    label="标准代码"
                    prop="st_no" >
                  </el-table-column>
                  <el-table-column
                    label="任务状态"
                    prop="status" >
                    <template scope="scope">
                      {{scope.row.status | stStatus}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="是否逾期"
                    prop="is_overdue" >
                    <template scope="scope">
                      <span v-if="scope.row.is_overdue==1">未逾期</span>
                      <span v-else>逾期</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="处理人"
                    prop="dealer_name" >
                  </el-table-column>
                  <el-table-column
                    label="提交时间"
                    prop="commit_time" >
                  </el-table-column>
                  <el-table-column
                    label="功能操作"
                    width="100">
                    <template scope="scope">
                      <el-button class="look" type="text" size="small" @click="subinfo(scope.row.rectify_id)">详情</el-button>
                      <span v-if="scope.row.status==1"> |
                        <el-button class="look" type="text" size="small" @click="getPerson(scope.row.rectify_id,2)">改派</el-button>
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column 
              label="计划名称"
              prop="plan_title" >
            </el-table-column>
            <el-table-column
              label="任务单号"
              prop="task_no" >
            </el-table-column>
            <el-table-column
              label="生成时间"
              prop="gen_time" >
            </el-table-column> 
            <el-table-column
              label="任务状态"
              prop="status" >
              <template scope="scope">
                {{scope.row.status | mainTask}}
              </template>
            </el-table-column>
            <el-table-column
              label="处理人"
              prop="dealer_name" >
            </el-table-column>
            <el-table-column
              label="考核类型"
              prop="type_name" >
            </el-table-column>
            <el-table-column
              label="考核成绩"
              prop="type_score" >
            </el-table-column>
            <el-table-column label="考核情况">
              <el-table-column
                prop="st_sum"
                label="总数">
              </el-table-column>
              <el-table-column
                prop="qualified_num"
                label="合格">
              </el-table-column>
              <el-table-column
                prop="unqualified_num"
                label="不合格">
              </el-table-column>
            </el-table-column>
            <el-table-column label="整改情况">
              <el-table-column
                prop="rectify_sum"
                label="总数">
              </el-table-column>
              <el-table-column
                prop="not_rectify_num"
                label="待整改">
              </el-table-column>
              <el-table-column
                prop="finished_num"
                label="已完成">
              </el-table-column>
              <el-table-column
                prop="overdue_num"
                label="逾期">
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="提交时间"
              prop="commit_time" >
            </el-table-column>
            <el-table-column
              label="功能操作"
              width="100">
              <template scope="scope">
                <el-button class="look" type="text" size="small" @click="info(scope.row.task_id)">详情</el-button>
                <span v-if="scope.row.status==1"> | 
                  <el-button class="look" type="text" size="small" @click="getPerson(scope.row.task_id,1)">改派</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    
    <div class="block">                    
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_num"
        :page-sizes="[10, 15]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    
    <el-dialog title="选择人员" class="myRoleDialog" :visible.sync="newPersonDialogVisible">
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="kw_person" autofocus></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchPerson">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree 
          key="personDlg"
          class="myOV_y_400px"
          ref="personDlg"
          v-loading="personLoading"
          :data="personDlgList"
          :props="personDlgProps"
          node-key="staff_id"
          @check-change="onChange"
          :render-content="renderContent"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newPersonDialogVisible = false">取 消</el-button>
        <el-button @click="handlePersonClick" type="primary" class="myBgGreen">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>     
  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myred{
    color: #f00;
    font-size: 12px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }  
  .myOV_y_400px{
    border:1px solid #f2f2f2;
    box-sizing: border-box;
    min-height: 200px;
    max-height: 400px;
    overflow-y: scroll; 
  }
</style>

<script>
  import { extractAreaIds , onSetArea } from '@/utils/misc';
  import { getRegion } from '@/utils/localstorage';
  import { getStaffList } from '@/api/staff';
  import { getTypeList , getTaskList , reassignment , reassignmentDealer } from "@/api/quality";
  export default {
    data(){
      return{
        title:"品质监控任务管理",
        page_size: null, //每页显示多少条
        page_num: null, //当前页码   
        total:null, //总条数  
        list:[],
        loading:false,
        regionOptions: [],
        regionOptSelected: [], 
        majorSelected:"",
        major:[],
        timeSelected:"",
        time:[
          {label:"生成时间",value:"1"},
          {label:"提交时间",value:"2"}
        ],
        timevalue:[],
        kw:"",
        i:0,

        kw_person:"",
        personLoading:false,
        personDlgList:[],
        newPersonDialogVisible:false,
        personDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        personIdList:"",
        personNameList:"",
        phone:"",
        taskID:"",
        type:""
      }
    },
    components: {

    },
    created(){
      document.title=this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
      this.ongetTypeList();
      this.ongetTaskList();
    },
    computed: {
      areaIds() {
        return extractAreaIds(this.regionOptSelected, this.regionOptions);
      }
    },
    filters:{ 
      mainTask(val){
        let type={
          "1":"待处理",
          "2":"处理中",
          "3":"整改中",
          "4":"已完成",
          "5":"逾期",
        }
        return type[val];
      },
      stStatus(val){
        let type={
          "1":"待整改",
          "2":"待审核", 
          "3":"已完成", 
        }
        return type[val];
      }
    },
    watch: {
      
    },
    methods:{
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.ongetTaskList();
      },
      handleCurrentChange(val) {//每页
        let vm=this;
        let supervisoryTaskConfig=window.sessionStorage.getItem("supervisoryTaskConfig");
        if(supervisoryTaskConfig){
          let config=JSON.parse(supervisoryTaskConfig);
          vm.regionOptSelected=onSetArea(vm.regionOptions,config.area_id);
          vm.majorSelected=config.type_id;
          vm.timeSelected=config.time_type;
          vm.kw=config.keyword;
          vm.timevalue=config.timevalue;
          vm.page_num = Number(config.page_num);
          window.sessionStorage.removeItem("supervisoryTaskConfig");
        }else{
          vm.page_num = val;
        }
        vm.ongetTaskList();
      },
      search(){
        this.ongetTaskList();
      },
      toTaskRules(){
        this.$router.push({
          path:"taskRules"
        })
      },
      info(task_id){
        let vm=this;
        let supervisoryTaskConfig={
          area_id:vm.areaIds,
          type_id:vm.majorSelected,
          time_type:vm.timeSelected,
          keyword:vm.kw,
          timevalue:vm.timevalue,
          page_num:vm.page_num,
        }
        window.sessionStorage.setItem("supervisoryTaskConfig",JSON.stringify(supervisoryTaskConfig));
        vm.$router.push({
          path:"supervisoryTaskComonents",
          query:{
            type:"info",
            id:task_id
          }
        })
      },
      subinfo(id){
        let vm=this;
        let supervisoryTaskConfig={
          area_id:vm.areaIds,
          type_id:vm.majorSelected,
          time_type:vm.timeSelected,
          keyword:vm.kw,
          timevalue:vm.timevalue,
          page_num:vm.page_num,
        }
        window.sessionStorage.setItem("supervisoryTaskConfig",JSON.stringify(supervisoryTaskConfig));
        vm.$router.push({
          path:"supervisorySubtaskComonents",
          query:{
            type:"info",
            id:id
          }
        })
      },
      getPerson(task_id,type){
        this.taskID=task_id;
        this.type=type;
        this.newPersonDialogVisible=true;
        this.onGetPersonList();
      },
      onGetPersonList(){//拉取人员
        let vm=this;
        let params = {
          page_num: 1,
          page_size: 10000,
          kw: vm.kw_person,
          area_id:vm.areaIds
        };
        vm.personLoading=true;
        getStaffList(params).then(response => {
          let res = response.data;
          vm.personDlgList = res.rows;
          vm.personLoading=false;
        }).catch(error => {
          vm.personLoading=false;
        })
      },
      handlePersonClick(){//确认人员
        let vm=this; 
        let person = vm.$refs.personDlg.getCheckedNodes();
        if(person.length>0){
          vm.personIdList=person[0].staff_id;
          vm.personNameList=person[0].user_name;
          vm.phone=person[0].phone; 
        }else{ 
          vm.personIdList="";
          vm.personNameList="";
          vm.phone=""; 
          vm.$message.info("执行失败，改派的人员不能为空！");
          return;
        }
        vm.$confirm(`确定改派给 ${vm.personNameList}?`).then(_ => {
          let params={
            "dealer_id": vm.personIdList,
            "dealer_name": vm.personNameList,
            "dealer_phone": vm.phone,
          }
          if(vm.type==1){
            reassignment(params,vm.taskID).then(response => {
              vm.$message.success("执行成功！");
              vm.ongetTaskList();
            }).catch(error => {
              vm.$message.error("执行失败！"+error.response.data.error_msg);
            })
          }else if(vm.type==2){
            reassignmentDealer(params,vm.taskID).then(response => {
              vm.$message.success("执行成功！");
              vm.ongetTaskList();
            }).catch(error => {
              vm.$message.error("执行失败！"+error.response.data.error_msg);
            })
          }
          vm.newPersonDialogVisible=false;
        })
        .catch(_ => {}); 
      },
      onSearchPerson(){//人员查询
        let vm=this;
        if(vm.kw_person){
          let params = {
            page_num: 1,
            page_size: 10000,
            kw: vm.kw_person,
          };
          vm.personLoading=true;
          getStaffList(params).then(response => {
            let res = response.data;
            vm.personDlgList = res.rows;
            vm.personLoading=false;
          }).catch(error => {
            vm.personLoading=false;
          })
        }else{
          vm.onGetPersonList();
        }
      },
      onChange(a,b,c){
        let vm=this;
        vm.i++;
        if(vm.i%2==0){
          if(b){
            vm.$refs.personDlg.setCheckedKeys([]);
            vm.$refs.personDlg.setCheckedKeys([a.staff_id]);
          }else{
            vm.$refs.personDlg.setCheckedKeys([]);
          }
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`联系方式：${node.data.phone}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.dept_name}`
            )
          ]
        );
      },
      ongetTypeList(){//类型列表
        let vm=this;
        let params={ 
          page_num:1,
          page_size:10000
        } 
        getTypeList(params).then(response => {
          let res=response.data;
          vm.major=res.rows; 
        }).catch(error => { 
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      ongetTaskList(){
        let vm=this;
        let params={
          area_id:vm.areaIds,
          type_id:vm.majorSelected,
          time_type:Number(vm.timeSelected),
          keyword:vm.kw,
          start_time:vm.timevalue?vm.timevalue[0]:'',
          end_time:vm.timevalue?vm.timevalue[1]:'',
          page_num:vm.page_num,
          page_size:vm.page_size
        }
        vm.loading=true;
        getTaskList(params).then(response => {
          let res=response.data;
          vm.list=res.rows;
          vm.page_size=res.page_size;
          vm.page_num=res.page_num;
          vm.total=res.total;
          vm.loading=false;
        }).catch(error => {
          vm.loading=false;
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      }

    }
}
</script>

